import { Card,Form,Input,message,Space,Button } from 'antd'
import logo from '../../assetsPro/Login2.png'
import './index.scss'
import { useStore } from '../../store'
import { useNavigate } from 'react-router-dom'
import { useState, React } from 'react'
import { UserOutlined,LockOutlined } from '@ant-design/icons';

function Login() { 

    const { loginStore } = useStore();
    const navigate = useNavigate();
    const [ ifTrue,setifTrue ] = useState(false)


    //校验成功
    function onFinish(value) {
        console.log(value)
        setifTrue(true)
        setTimeout(async () => {
            try {
                await loginStore.login({
                    userName: value.username,
                    password: value.password
                });
            } catch (e) {
                message.error('网络请求超时，请检查网络状况！');
                setifTrue(false)
            }
            navigate("/", { replace: true });
            setifTrue(false)
        }, 2000);
    }
    //校验失败
    function onFinishFailed(value) {
        message.error('亲！这样是不行的');
    }

    return (
            <div className="login">
                <Card className="login-container">
                    <img className="login-logo" src={logo} alt="" />
                {/* 登录表单 */}
                <Form
                    className="login-form"
                    //定义输入事件
                    validateTrigger={['onBlur', 'onChange']}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item className='login-form-p'>
                        <p>欢迎登录</p>
                    </Form.Item> 
                    <Form.Item 
                        className='login-form-input'
                        name="username"
                        rules={[
                            {
                                required: true,
                                message:'亲，账号我没看见呢！'
                            },
                        ] }
                        >
                        <Space>
                            <UserOutlined /><Input placeholder="输入账号" bordered={false} />
                        </Space>
                    </Form.Item>
                    <Form.Item 
                        className='login-form-input'
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '亲，密码还没输入噢！'
                            }
                        ]}
                        >
                        <Space><LockOutlined />
                            <Input.Password placeholder="输入密码" bordered={false} />
                        </Space>
                    </Form.Item>
                    <Form.Item >
                        <Button className='login-form-button' type="primary" size="large" htmlType="submit" loading={ifTrue} block>
                        登录
                        </Button>
                    </Form.Item>
                </Form>
                </Card>
        </div>
        
    )
}

export default Login